<template>
  <div id="addChannelsDialog">
    <el-dialog
      title="渠道配置"
      :visible.sync="dialogData.isShow"
      width="800px"
      @close="closeAddDialog"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-position="right"
        class="addForm"
        label-width="150px"
        style=" margin-left:30px;"
      >
        <el-form-item label="活动名称：" label-width="150" prop="activityId">
          <el-select
            v-model="ruleForm.activityId"
            filterable
            placeholder="请选择活动"
            @change="changeActivity"
          >
            <el-option
              v-for="item in activeList"
              :key="item.id"
              :label="item.activityName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动原始链接："
          label-width="150"
          prop="originalUrl"
        >
          <el-input
            v-model="originalUrl"
            disabled
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="推广渠道名称："
          label-width="150"
          prop="channelName"
        >
          <el-input
            style="width: 600px"
            v-model.trim="ruleForm.channelName"
            placeholder="请您输入一级渠道名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="success"
          :loading="loading"
          @click.prevent="confirmLabel('ruleForm')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelslink, addChannels } from '@/api/activityCenter/channels'
export default {
  name: 'channelsUrlDialog',
  msg: '新增渠道配置',
  props: {
    dialogData: {
      type: Object,
      default() {
        return { isShow: false }
      }
    },
    activeList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    var validateNmae = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请您输入一级渠道名称'))
      } else if (value.toString().length > 20) {
        callback(new Error('一级渠道名称不能超过20字'))
      } else {
        callback()
      }
    }
    return {
      id: '', //活动id
      loading: false,
      // 表单数据
      ruleForm: {
        activityId: '',
        channelName: ''
      },
      originalUrl: '', // 活动原始链接
      rules: {
        activityId: {
          required: true,
          message: '请选择活动名称',
          trigger: 'blur'
        },
        channelName: [
          { validator: validateNmae, trigger: 'blur' }
          // {
          //   required: true,
          //   pattern:'(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
          //   message: '请输入正确的活动详情页url',
          //   trigger: 'blur'
          // }
        ]
      }
    }
  },
  mounted() {
    // this.ruleForm.activityId = this.activeList[0].id
  },
  methods: {
    // 弹窗关闭事件
    closeAddDialog() {
      this.examineLoading = false
      this.dialogData.isShow = false
    },
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.subHand()
        } else {
          return false
        }
      })
    },
    // 提交表单
    subHand() {
      addChannels(this.ruleForm, (response) => {
        this.closeAddDialog()
        this.$emit('refresh')
      })
    },
    changeActivity(id) {
      getChannelslink(id, (response) => {
        this.originalUrl = response.originalUrl
      })
    }
  }
}
</script>

<style lang="less">
#addChannelsDialog {
  .el-dialog {
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
  }
}
</style>
